<template>
  <!-- 具名插槽 -->
  <!-- 插槽就是用来指明当父组件使用子组件并在子组件中写入内容时，这部分内容要显示在子组件哪个位置的问题 -->
  <!-- 如果一个子组件中的不同内容需要显示在该子组件的不同位置时，就需要用指定名字加以区分 -->
  <div class="named">
    <!-- 每个部分都用template模板包裹 -->
    <!-- 每个部分用v-slot名称和name进行配对，v-slot:名称 写在template标签中 name="名称"写在子组件slot标签的对应位置 -->
    <!-- 默认插槽起始就是名称为default的具名插槽，即v-slot:default, name="default"，只不过省略了，不用去写 -->
    <!-- 2.6版本之前的写法是将v-slot:header写作slot="header"，2.6之后废弃了这种写法 -->
    <c1>
      <template v-slot:header>
        这是第1部分
      </template>
      <template v-slot:main>
        这是第2部分
      </template>
      <!-- 具名插槽v-slot:footer还可以缩写为#footer -->
      <template #footer>
        这是第3部分
      </template>
      <!-- 插槽名称还可以是动态的，如v-slot:['header'] -->
      <!-- <template v-slot:[动态名称]></template> -->
    </c1>
  </div>
</template>

<script>
import c1 from './c1.vue'

export default {
  name: 'NamedSlot',
  components: { c1 },
}
</script>